<template>
	<el-aside v-if="!navTabsStore.tabFullScreen"
	          :class="'layout-aside-' + webConfigStore.layout.layoutMode + ' ' + (webConfigStore.layout.shrink ? 'shrink' : '')">
		<logo v-if="webConfigStore.layout.menuShowTopBar"/>
		<menu-vertical/>
	</el-aside>
</template>

<script lang="ts" setup>
import {computed} from 'vue'
import Logo from '../logo.vue'
import MenuVertical from './components/menuVertical.vue'
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {useNavTabsStore} from '@/stores/modules/navTabs.store'

const webConfigStore = useWebConfigStore()
const navTabsStore = useNavTabsStore()

const menuWidth = computed(() => webConfigStore.menuWidth())
</script>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
	name: 'layout/aside'
})
</script>

<style lang="scss" scoped>
.layout-aside-Default {
	background: var(--cus-bg-color-overlay);
	border-radius: var(--el-border-radius-base);
	box-shadow: var(--el-box-shadow-light);
	height: calc(100vh - 32px);
	margin: 16px 0 16px 16px;
	overflow: hidden;
	transition: width 0.3s ease;
	width: v-bind(menuWidth);
}

.layout-aside-Classic {
	background: var(--cus-bg-color-overlay);
	height: 100vh;
	margin: 0;
	overflow: hidden;
	transition: width 0.3s ease;
	width: v-bind(menuWidth);
}

.shrink {
	left: 0;
	position: fixed;
	top: 0;
	z-index: 9999999;
}
</style>
